<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content cbafter">
            <div class="w220 fl">
                <menu-list></menu-list>
            </div>
            <div class="w980 fr">
                <div class="h1_tit">
                    <h1>排班信息</h1>
                </div>
                <div class="bs-example-modal-lg">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content" id="edit_doctorplan">
                            <div class="modal-body cbafter">
                                <div class="fl"> <img :src="optobj.avatarFileId"></div>
                                <div class="fl">
                                    <p><span class="name">{{optobj.name}}</span><span class="grey">{{optobj.levelText}}</span> <span class="orgname">{{optobj.orgName}}</span>|<span>{{optobj.deptName}}</span></p>
                                    <p><span class="grey">擅长：</span><span>{{optobj.speciality}}</span></p>
                                </div>
                                <div class="state" :class="{state1:showstate=='state1',state2:showstate=='state2'}"></div>
                                <div class="cb verifyState0" v-show="showstate=='state2'">
                                    <h2>抱歉，你的审核未通过！</h2>
                                    <p>{{verifySuggestion}}</p>
                                </div>
                                <table class="table cb table-bordered table-condensed">
                                    <caption>
                                        <div @click="nextweek()">下一周<span class="glyphicon glyphicon-chevron-right"></span></div>
                                        <div @click="prevtweek()"><span class="glyphicon glyphicon-chevron-left"></span>上一周</div>
                                    </caption>
                                    <tr>
                                        <th class="active" style="border-bottom:none">坐诊</th>
                                        <th class="active" v-for="item in datearr">{{item}}</th>
                                    </tr>
                                    <tr>
                                        <th class="active" style="border-top:none">时间</th>
                                        <th class="active" v-for="item in dayarr">{{item}}</th>
                                    </tr>
                                    <tr>
                                        <td class="active">上午</td>
                                        <td v-for="(index,item) in arr1" @click="planedit(item,index)" :class="{mscursor:item.flag==1}" track-by="$index">
                                            <p>{{item.orgName}}</p>
                                            <p>{{item.deptName}}</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="active">下午</td>
                                        <td v-for="(index,item) in arr2" @click="planedit(item,index)" :class="{mscursor:item.flag==1}" track-by="$index">
                                            <p>{{item.orgName}}</p>
                                            <p>{{item.deptName}}</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="active">晚上</td>
                                        <td v-for="(index,item) in arr3" @click="planedit(item,index)" :class="{mscursor:item.flag==1}" track-by="$index">
                                            <p>{{item.orgName}}</p>
                                            <p>{{item.deptName}}</p>
                                        </td>
                                    </tr>
                                </table>
                                <div class="buttongroup">
                                    <button class="default ok" @click="savedoctorplan">保存</button>
                                    <button class="default greynobg" @click="prev4week">复制</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 复制弹框 -->
        <div class="modal fade" id="changedate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">选择时间段</h4>
                    </div>
                    <div class="modal-body">
                        <h3 class="text-center">请选择你想要复制的周期段</h3>
                        <div class="unit" :class="{selected:item.selected}" v-for="(index,item) in copydatelist" @click="changeselected(index)">{{item.text}}</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="default blue center" @click="confirmcopy">复制</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
        <!-- 医生执业机构 -->
        <div class="modal fade" id="orglist" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">更换执业点</h4>
                    </div>
                    <div class="modal-body">
                        <div class="unit" :class="{selected:item.selected}" v-for="(index,item) in orglist" @click="orgchangeselected(index)">{{item.orgname+'-'+item.depname}}</div>
                    </div>
                    <div class="modal-footer ">
                        <div class="buttongroup">
                            <button type="button" class="default blue center" @click="confirmchangeorg">确定</button>
                            <button type="button" class="default center cancelplan" @click="cancelplan">取消排班</button>
                        </div>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
</template>
<script>
var defaultheadimg = require("assets/img/cs2.jpg");
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
module.exports = {
    data() {
            return {
                defaultheadimg:"",//默认头像
                nextmonday: this.getnextWeekmonday(),
                datearr: [], //日期数组
                doctorName: "",
                dayarr: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], //星期数组固定死
                dayarrnum: [1, 2, 3, 4, 5, 6, 7], //代表星期的数字
                arr1: [], //上午
                arr2: [], //下午
                arr3: [], //晚上
                copydatelist: [], //复制的日期列表
                optobj: {
                    name: "",
                    levelText: "",
                    orgName: "",
                    deptName: "",
                    speciality: "",
                    avatarFileId: '',
                },
                orglist: [],
                isorglist: true, //是否已经请求过执业机构列表
                editdata: {}, //选中编辑的数据
                editdataindex: "", //选中编辑的数据在arr1或者arr2或者arr3的索引
                showstate: "",
                verifySuggestion: "",

            }
        },
        components: {
            moduleHead, menuList
        },
        ready() {
            var that = this;
            this.datearr = this.mondaytosundayarr(this.nextmonday);
            this.getfourweek();
            $.when(Public.commonajax("base.doctorProvider", "getDoctInfoAndOrgDoctors", "['']"))
                .done(function(res) {
                    if (res.code == 200) {
                        res.body.avatarFileId =res.body.avatarFileId?Public.IMGVIEW_URL() + res.body.avatarFileId:defaultheadimg;
                        that.optobj = res.body;
                        that.getdata();
                        //查询医生执业列表 开始
                        $.when(Public.commonajax("coms.doctorPlanService", "queryOrgDoctorList", "['" + that.optobj.doctorId + "']"))
                            .done(function(res) {
                                if (res.code == 200) {
                                    that.isorglist = false;
                                    $.each(res.body, function(index2, el) {
                                        el.selected = false;
                                    });
                                    that.orglist = res.body;

                                }
                            })
                            //查询医生执业列表 结束

                    }

                })



        },

        methods: {

            // 获取数据请求的方法
            getdata() {
                    var that = this;
                    let optstr = `['${this.optobj.doctorId}','${that.nextmonday}']`;
                    $.when(Public.commonajax("coms.doctorPlanService", "queryDoctorPlan", optstr))
                        .done(function(res) {
                            if (res.code == 200) {
                                var amarr = [],
                                    pmarr = [],
                                    ntarr = [];
                                amarr = res.body.doctorPlanList.filter(function(item) {
                                    return item.planClass == 1;
                                });
                                pmarr = res.body.doctorPlanList.filter(function(item) {
                                    return item.planClass == 2;
                                });
                                ntarr = res.body.doctorPlanList.filter(function(item) {
                                    return item.planClass == 3;
                                });
                                that.arr1 = that.getdataarr(amarr, '1');
                                that.arr2 = that.getdataarr(pmarr, '2');
                                that.arr3 = that.getdataarr(ntarr, '3');
                                if (res.body.verify != null && res.body.verify.verifySuggestion) {
                                    that.verifySuggestion = res.body.verify.verifySuggestion

                                }
                                that.showstate = "state0" //待审核
                                if (res.body.verify&&res.body.verify.verifyState == 1) {
                                    that.showstate = "state1" //审核通过
                                }
                                if (res.body.verify&&res.body.verify.verifyState == 2){
                                    that.showstate = "state2" //审核未通过
                                }

                            }
                        });
                },
                // 点击复制获取数据请求的方法
                getdata2() {
                    var that = this;
                    let optstr = `['${this.optobj.doctorId}','${that.nextmonday}']`;
                    $.when(Public.commonajax("coms.doctorPlanService", "queryDoctorPlan", optstr))
                        .done(function(res) {
                            if (res.code == 200) {
                                $.each(res.body.doctorPlanList, function(index, el) {
                                    el.planId = 0;
                                    el.flag = 1;
                                    el.planDate = "";
                                    el.verifyState = "0";
                                });
                                var amarr = [],
                                    pmarr = [],
                                    ntarr = [];
                                amarr = res.body.doctorPlanList.filter(function(item) {
                                    return item.planClass == 1;
                                });
                                pmarr = res.body.doctorPlanList.filter(function(item) {
                                    return item.planClass == 2;
                                });
                                ntarr = res.body.doctorPlanList.filter(function(item) {
                                    return item.planClass == 3;
                                });
                                that.arr1 = that.getdataarr(amarr, '1');
                                that.arr2 = that.getdataarr(pmarr, '2');
                                that.arr3 = that.getdataarr(ntarr, '3');

                                that.showstate = "state0" //待审核

                            }
                        });



                },
                getdataarr(arr, planClass) { //通过另外一个数组的索引，来填充数据，从而活动上午下午晚上对应的数据
                    var that = this;
                    var indexarr = [];
                    var temarr = [{
                        text: 'noconent',
                        planClass: planClass
                    }, {
                        text: 'noconent',
                        planClass: planClass
                    }, {
                        text: 'noconent',
                        planClass: planClass
                    }, {
                        text: 'noconent',
                        planClass: planClass
                    }, {
                        text: 'noconent',
                        planClass: planClass
                    }, {
                        text: 'noconent',
                        planClass: planClass
                    }, {
                        text: 'noconent',
                        planClass: planClass
                    }];
                    if (arr && arr.length > 0) {
                        $.each(this.dayarrnum, function(index, el) {
                            $.each(arr, function(index2, el2) {
                                if (el == el2.weekDay) {
                                    if (el2.planDate == "") {
                                        el2.planDate = that.datearr[index];
                                    }
                                    indexarr.push(index);
                                }
                            });
                        });

                        $.each(indexarr, function(index, el) {
                            temarr[el] = arr[index]
                        });

                    }
                    return temarr
                },
                nextweek() { //点击获取下周数据
                    this.nextmonday = this.getnextWeekmonday(this.nextmonday);
                    console.log(this.nextmonday);
                    this.datearr = this.mondaytosundayarr(this.nextmonday);
                    this.getdata();
                    this.getfourweek();

                },
                prevtweek() { //点击获取上周数据
                    this.nextmonday = this.getpreWeekmonday(this.nextmonday);
                    this.datearr = this.mondaytosundayarr(this.nextmonday);
                    this.getdata();
                    this.getfourweek();
                },
                // 根据周一得到周一到周日的日期（monday只传周一的时间）
                mondaytosundayarr(monday) {
                    var now = new Date(monday);
                    var arr = [];
                    var date = now.getDate();
                    for (let i = 0; i < 7; i++) {
                        // now.setDate(date + i)
                        var arritem = this.addDate(monday, i);
                        arr.push(arritem)
                            // arr.push(Public.formatDate(now))
                    }
                    return arr;
                },
                // 根据给定日期获取下周的周一 可以传任何日期
                getnextWeekmonday(date) {
                    var now = date ? new Date(date) : new Date();
                    var day = now.getDay();
                    now.setDate(now.getDate() + (8 - day)); //下周的周一
                    console.log(now);
                    return Public.formatDate(now);
                },
                //  根据给定日期获取上周的周一 只传周一的日期
                getpreWeekmonday(monday) {
                    var now = monday ? new Date(monday) : new Date();
                    // var currentdate=new Date();
                    // var currentdatestr=this.getnextWeekmonday(currentdate);
                    // if (monday == currentdatestr) {
                    //     this.isshowprevbtn = false
                    // }
                    now.setDate(now.getDate() - 7);
                    return Public.formatDate(now);
                },
                // 日期增减函数
                addDate(date, days) { //days往前算就传入负数，往后算就传入正数
                    var d = new Date(date);
                    d.setDate(d.getDate() + days);
                    var month = d.getMonth() + 1;
                    var day = d.getDate();
                    if (month < 10) {
                        month = "0" + month;
                    }
                    if (day < 10) {
                        day = "0" + day;
                    }
                    var val = d.getFullYear() + "-" + month + "-" + day;
                    return val;
                },
                prev4week() { //点击获取前四周的数据
                    $("#changedate").modal('show');

                },
                changeselected(index) { //复制日期选中的样式改变
                    $.each(this.copydatelist, function(index2, el) {
                        el.selected = false;
                    });
                    this.copydatelist[index].selected = true;
                },
                confirmcopy() { //确认复制
                    var temarr = this.copydatelist.filter(function(item) {
                        return item.selected == true;
                    });
                    var curmoday = this.nextmonday;
                    this.nextmonday = temarr[0].text.substring(0, 10);
                    this.getdata2();
                    this.nextmonday = curmoday;

                    // this.datearr = this.mondaytosundayarr(this.nextmonday);
                    $("#changedate").modal('hide');
                },
                planedit(item, index) { //点击表格td编辑排班
                    var clicktime = new Date(this.datearr[index]);
                    clicktime = clicktime.getTime();
                    var now = new Date();
                    var nowtime = now.getTime();
                    if (clicktime > nowtime) {
                        $("#orglist").modal("show");
                        this.editdataindex = index;
                        this.editdata = {
                            planId: item.planId ? item.planId : 0,
                            deptId: item.deptId ? item.deptId : "",
                            deptName: item.deptName ? item.deptName : "",
                            orgId: item.orgId ? item.orgId : "",
                            orgName: item.orgName ? item.orgName : "",
                            planClass: item.planClass,
                            planDate: this.datearr[index],
                            flag: 1,
                        }
                    }
                },
                orgchangeselected(index) { //复制日期选中的样式改变
                    $.each(this.orglist, function(index2, el) {
                        el.selected = false;
                    });
                    this.orglist[index].selected = true;
                },
                confirmchangeorg() { //确定更换执业机构
                    var temarr = this.orglist.filter(function(item) {
                        return item.selected == true;
                    });
                    this.editdata.orgId = temarr[0].orgId;
                    this.editdata.deptId = temarr[0].deptId;
                    this.editdata.orgName = temarr[0].orgname;
                    this.editdata.deptName = temarr[0].depname;
                    if (this.editdata.planClass == 3) {
                        this.arr3.splice(this.editdataindex, 1, this.editdata);
                    } else if (this.editdata.planClass == 2) {
                        this.arr2.splice(this.editdataindex, 1, this.editdata);
                    } else {
                        this.arr1.splice(this.editdataindex, 1, this.editdata);
                    }
                    $("#orglist").modal("hide");
                },
                cancelplan() { //取消排班

                    if (this.editdata.planClass == 3) {
                        this.arr3.splice(this.editdataindex, 1, {
                            text: "nocontent",
                            planClass: "3"
                        });

                    } else if (this.editdata.planClass == 2) {
                        this.arr2.splice(this.editdataindex, 1, {
                            text: "nocontent",
                            planClass: "2"
                        });

                    } else {
                        this.arr1.splice(this.editdataindex, 1, {
                            text: "nocontent",
                            planClass: "1"
                        });

                    }
                    this.editdata = {};
                    this.editdataindex = "";
                    $("#orglist").modal("hide");
                },
                savedoctorplan() {
                    var that=this;
                    var savedata = [];
                    savedata = savedata.concat(this.arr1, this.arr2, this.arr3);
                    savedata = savedata.filter(function(item) {
                        return item.flag == 1;
                    });
                    console.log(this.nextmonday);
                    var temsaveobj = {
                        doctorPlanList: savedata,
                        doctorPlanVerify: {
                            "doctorId": this.optobj.doctorId,
                            "planBeginDate": this.addDate(this.nextmonday, 0),
                            "planEndDate": this.addDate(this.nextmonday, 6),
                            "doctorName": this.optobj.name
                        }
                    };
                    $.when(Public.commonajax("coms.doctorPlanService", "saveDoctorPlan", "[" + JSON.stringify(temsaveobj) + "]"))
                        .done(function(res) {
                            if (res.code == 200) {
                                Public.ajaxPrompt("保存成功");
                                that.showstate = "state0" //待审核

                            } else {
                                Public.ajaxPrompt(res.msg)
                            }
                        })
                },
                getfourweek() {
                    //获取当前周的前4周周一和周日的日期 开始
                    var nextmonday = this.getnextWeekmonday(this.nextmonday);
                    var temarr = [],
                        temarr2 = [],
                        temarr3 = [];
                    var init = this.addDate(nextmonday, -14);
                    for (var i = 0; i < 4; i++) {
                        temarr.push(this.addDate(init, -7 * i)); //周一
                        temarr2.push(this.addDate(init, (-7 * i) + 6)); //周日
                    }
                    for (var i = 0; i < 4; i++) {
                        var temobj = {
                            text: temarr[i] + '至' + temarr2[i],
                            selected: false //点击切换边框用的标识
                        }
                        temarr3.push(temobj);
                        this.copydatelist = temarr3;
                    }
                    //获取当前周的前4周周一和周日的日期 结束
                }



        },
        events: {

        },
}
</script>
<style scoped>
.content .modal-dialog {
    margin: 0;
}

.content #edit_doctorplan .modal-body {
    padding: 40px 30px;
    overflow-y: auto;
    overflow-x: hidden;
   
}
.modal-lg{
     width: 940px
}
.w980 {
    padding: 0
}

.content #edit_doctorplan .modal-header {
    min-height: 60px;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
    background: #fafafa;
    border-radius: 5px;
}

.content #edit_doctorplan .modal-header h2 {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #1fc49a;
    padding-left: 20px;
}

#edit_doctorplan img {
    height: 63px;
    width: auto
}

#edit_doctorplan p span {
    margin-left: 10px;
    height: 24px;
    line-height: 24px;
}

#edit_doctorplan .modal-body {
    position: relative;
}

#edit_doctorplan .modal-body .state {
    position: absolute;
    top: 0;
    right: 0;
    width: 99px;
    height: 88px;
}

#edit_doctorplan .modal-body .state1 {
    background: url(../../assets/img/state1.jpg) no-repeat center center;
}

#edit_doctorplan .modal-body .state2 {
    background: url(../../assets/img/state2.jpg) no-repeat center center;
}

#edit_doctorplan .modal-body>div:nth-child(1) {
    width: 70px;
}

#edit_doctorplan .modal-body>div:nth-child(2) {
    width: 700px;
}

#edit_doctorplan .modal-body .name {
    font-weight: 700;
    color: #1dc499
}

#edit_doctorplan .modal-body .orgname {
    padding-right: 10px
}

#edit_doctorplan .modal-body .grey {
    color: #999;
}

.table {
    margin-top: 60px;
}

.table td,
.table th {
    text-align: center;
}

.table th {
    font-weight: normal;
}

.table tr td.mscursor {
    color: #1dc499;
}

.table tr td.mscursor:hover {
    background: #1dc499;
    color: #fff;
    cursor: pointer;
}
.table tr td p{
    max-width: 115px;
}
.table tr td.active {
    color: #333;
   
}

.table tr td.active:hover {
    color: #333;
    background: none;

}
.table>tbody>tr>td.active{
     min-height:52px; 
     line-height: 52px;
}
.table tr th:nth-child(1) {
    color: #1dc499
}

.table caption div {
    float: right;
    width: 80px;
    color: #1dc499;
    cursor: pointer;
}

.buttongroup {
    width: 300px;
    margin: 10px auto;
}

.buttongroup button {
    display: inline-block;
}

.buttongroup button:nth-child(2) {
    margin-left: 30px
}

#changedate .modal-body,
#orglist .modal-body {
    height: 240px;
    padding: 30px
}

#changedate h3 {
    font-size: 16px;
    margin: 15px 0 20px;
}

.unit {
    float: left;
    width: 42%;
    text-align: center;
    line-height: 30px;
    height: 30px;
    border: 1px dashed #F0EFF4;
    border-radius: 5px;
    margin: 10px 4%;
    color: #333
}

.unit.selected {
    border: 1px solid #1dc499;
    color: #1dc499
}

#orglist .unit {
    float: none;
    width: 84%;
}

.unit:hover {
 cursor:pointer;
}
.verifyState0 {
    text-align: center;
}

.verifyState0 h2 {
    color: #ef5037;
    font-size: 20px;
    line-height: 50px
}
button.cancelplan{color: #333}
</style>
